<template>
  <div class="common">
    <slide-verify
      ref="slideblock"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :accuracy="accuracy"
      :slider-text="text"
      style="height:38000px; width:100%;"
    ></slide-verify>
    <div>{{msg}}</div>

  </div>
</template>

<script>
export default {
  name: "logincode",
  data() {
    return {
      msg: '',
      text: '向右滑',
      accuracy: 1,
      form: {},
      rules: {
        // 表单校验   正则
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
        ],
        captcha: [
          //失去焦点触发
          { required: true, message: "请输入正确验证码", trigger: "blur" },
        ],
      },
    };
  },
  methods:{
    onSuccess(times){
           console.log('验证通过');
            this.msg = '验证通过...'
            
        },
    onFail(){
            console.log('验证不通过');
            this.msg = ''
        },
    onRefresh(){
            console.log('点击了刷新小图标');
            this.msg = ''
        },
    onFulfilled() {
            console.log('刷新成功啦！');
        },
    onAgain() {
            console.log('检测到非人为操作的哦！');
            this.msg = 'try again';
            // 刷新
            this.$refs.slideblock.reset();
        },
  }
};
</script>

<style lang="scss" scoped>
.myform{
    padding-right:50px;
    padding-top:20px;
}
.width100{
    width:100%;
}

.mycaptcha {
    ::v-deep .el-form-item__content{
        display:flex;
    }
}
</style>